<script setup lang="ts" name="RoleAddEdit">
import { transformI18n } from '@/plugins/i18n'
import useDictionaryEntry from '@/hooks/useDictionaryEntry'
const { getDictionaryEntryData } = useDictionaryEntry()
const statusList = ref([])
const whetherList = ref([])
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formData = ref({
  name: '',
  code: '',
  status: true,
  isAdmin: false,
  sort: 0,
  remark: ''
})
// 显示新建/编辑模块表单抽屉弹窗
const showDialog = (v) => {
  dialogVisible.value = true
  if (v) {
    dialogTitle.value = 'buttons.buttonEdit'
    formData.value.name = v.name
    formData.value.code = v.code
    formData.value.status = v.status
    formData.value.isAdmin = v.isAdmin
    formData.value.sort = v.sort
    formData.value.remark = v.remark
  } else {
    dialogTitle.value = 'buttons.buttonCreate'
    formData.value.name = ''
    formData.value.code = ''
    formData.value.status = true
    formData.value.isAdmin = false
    formData.value.sort = 0
    formData.value.remark = ''
  }
}
// 子组件将方法暴露给父组件
defineExpose({ showDialog })
const handleCloseDialog = () => {
  dialogVisible.value = false
}

const handleOk = () => {
  console.log(formData.value)
}

const getStatusList = async () => {
  statusList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'enable_boolean'
  })
}
getStatusList()

const getWhetherList = async () => {
  whetherList.value = await getDictionaryEntryData({
    label: '',
    status: 2,
    type: 'whether_boolean'
  })
}
getWhetherList()
</script>

<template>
  <el-dialog v-model="dialogVisible" width="600px" append-to-body :title="transformI18n(dialogTitle, true) + transformI18n('page.角色', true)">
    <el-form label-width="auto" label-position="right">
      <el-form-item :label="$t('page.角色名称')">
        <el-input v-model="formData.name" :placeholder="$t('placeholders.请输入') + $t('page.角色名称')" />
      </el-form-item>
      <el-form-item :label="$t('page.角色标识')">
        <el-input v-model="formData.code" :placeholder="$t('placeholders.请输入') + $t('page.角色标识')" />
      </el-form-item>
      <el-form-item :label="$t('page.状态')">
        <el-radio-group class="radio-button" v-model="formData.status">
          <el-radio v-for="(item, index) in statusList" :key="index" :label="item.value" border>{{ $t('page.' + item.label) }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('page.是否管理员')">
        <el-radio-group class="radio-button" v-model="formData.isAdmin">
          <el-radio v-for="(item, index) in whetherList" :key="index" :label="item.value" border>{{ $t('page.' + item.label) }}</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item :label="$t('page.排序')">
        <el-input-number v-model="formData.sort" :min="0" />
      </el-form-item>
      <el-form-item :label="$t('page.备注')">
        <el-input type="textarea" v-model="formData.remark" :placeholder="$t('placeholders.请输入') + $t('page.备注')" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="modal-footer" ref="modalFooter">
        <el-button @click="handleCloseDialog">{{ $t('buttons.buttonCancel') }}</el-button>
        <el-button type="primary" @click="handleOk">{{ $t('buttons.buttonConfirm') }}</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">
.el-form {
  :deep(.el-form-item__content) {
    .el-radio-group {
      margin: 0;
    }
  }
}

.modal-footer {
  display: inline-flex;
  overflow: hidden;
}
</style>
